<template>
    <div>
        <van-popup v-model="visible" :style="{ padding: '10px', width: '80vw', height: '80vh' }">
            <van-nav-bar :title="keyName" left-text="关闭" @click-left="visible = false;" right-text="添加"
                @click-right="openAddword" />
            <van-row>
                <van-col span="24" style="text-align: center;">
                    <van-checkbox-group v-model="identityChk" direction="horizontal" style="justify-content: center;">
                        <van-checkbox shape="square" right-icon="video-o" name="0" style="margin-bottom: 10px"
                          >识别公库</van-checkbox>
                        <van-checkbox shape="square" right-icon="video-o" name="1"
                            style="margin-bottom: 10px">识别私库</van-checkbox>
                    </van-checkbox-group>
                </van-col>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-search placeholder="请输入搜索关键词" v-model="searchKeyword" />
                </van-col>
            </van-row>
            <van-row v-for="item in filterManagerList" :key="item.id">
                <van-col span="16" style="font-size:0.37333rem;">
                    <div style="margin-top:10px;">{{ item.keyword }}</div>
                </van-col>
                <van-col span="8">
                    <van-button type="primary" size="small" style="float:right;margin-top: 5px;margin-left:5px;"
                        @click="openEditword(item.id)">修改</van-button>
                    <van-button type="danger" size="small" style="float:right;margin-top: 5px;"
                        @click="delword(item.id)">删除</van-button>
                </van-col>
            </van-row>
        </van-popup>

        <van-popup v-model="showRemarkDetail" :style="{ padding: '10px', width: '80vw', height: '80vh' }">
            <van-nav-bar :title="keyName + '-' + (editModelType == 'add' ? '添加' : '修改')" left-text="返回"
                @click-left="showRemarkDetail = false;" />
            <van-row>
                <van-col span="24"><van-field label="标题" placeholder="请输入" v-model="editModel.keyword" /></van-col>
                <van-col span="24"><van-field label="内容" type="textarea" placeholder="请输入"
                        v-model="editModel.keywordContent" /></van-col>
                <van-col span="24" style="text-align: center;">
                    <van-button type="primary" size="small" @click="saveEdit">保存</van-button>
                    &nbsp;
                    &nbsp;
                    <van-button size="small" @click="showRemarkDetail = false;">关闭</van-button>
                </van-col>
            </van-row>
        </van-popup>
    </div>
</template>
<script>
import loginType from './loginType';
import { Toast } from 'vant'
export default {
    name: 'comRemarkPopup',
    model: {
        prop: "value",
        event: "change",
    },
    components: {
    },
    props: {
        propName: String,
        keyId: String,
        keyName: String,
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            searchKeyword: '',
            isActionSuccessed: false,
            editModel: {},
            editModelType: 'add',
            isInitConfig: false,
            identityChk: ['0', '1'],
            visible: false,
            showRemarkDetail: false,
            managerList: []
        }
    },

    computed: {
        filterManagerList() {
            if (this.searchKeyword)
                return this.managerList.filter(m => m.keyword.includes(this.searchKeyword));
            else
                return this.managerList;

        }
    },
    watch: {
        identityChk(val, oldval) {

            if (this.isInitConfig) {
                this.isInitConfig = false;
                return;
            }
            var pubVal = '0';
            var privateVal = '1';
            var v = val.find(m => m == pubVal);
            if (v != oldval.find(m => m == pubVal))
                this.configChange(v == pubVal, false);


            v = val.find(m => m == privateVal);
            if (v != oldval.find(m => m == privateVal))
                this.configChange(v == privateVal, true);
        },
        value(val) {
            //console.log(1,val);
            this.visible = val;
        },
        visible(val) {
            //console.log(2,val);
            this.$emit("change", val);
            if (val) {
                this.getList();
                this.initData();
            }
        }
    },
    methods: {
        openEditword(id) {
            var ary = this.managerList.filter(m => m.id == id);
            if (ary.length == 1) {
                this.editModel = ary[0];
                this.editModelType = 'edit';
                this.showRemarkDetail = true;
            }
        },
        openAddword() {
            this.editModelType = 'add';
            this.editModel = {};
            this.showRemarkDetail = true;

        },
        saveEdit() {
            if (this.editModelType == 'add')
                this.addword();
            else
                this.editword();
        },
        addword() {
            if (!this.editModel.keyword) {
                Toast('请填写关键字！')
                return;
            }
            if (!this.editModel.keywordContent) {
                Toast('请填写关键字内容！')
                return;
            }
            var params = {
                propType: 'remark',
                propName: this.propName,
                keyName: this.keyName,
                keyId: this.keyId,
                isPrivate: loginType.isPrivatePersionLogin(),
                isSelected: true,
                isCompare: true
            };
            Object.assign(this.editModel, params);
            var that = this;
            this.$api.keyword.keywordAdd(this.editModel).then(res => {
                if (res.code === 200 && res.data) {
                    //Toast('操作成功！')
                    that.isActionSuccessed = true;
                    that.showRemarkDetail = false;
                    that.getList();
                } else {
                    Toast('系统出错！')
                }
            })
        },
        editword(id) {
            if (!this.editModel.keyword) {
                Toast('请填写关键字！')
                return;
            }
            if (!this.editModel.keywordContent) {
                Toast('请填写关键字内容！')
                return;
            }
            var that = this;
            // var ary = this.managerList.filter(m => m.id == id);
            // if (ary.length == 1) {
            //     var that = this;
            this.$api.keyword.keywordUpdate(this.editModel).then(res => {

                if (res.code === 200 && res.data) {
                    that.isActionSuccessed = true;
                    that.showRemarkDetail = false;
                    //Toast('操作成功！')
                    that.getList();
                } else {
                    Toast('系统出错！')
                }
            })
            //}
        },
        delword(id) {
            var params = {
                id
            };
            var that = this;
            this.$api.keyword.keywordDelete(params).then(res => {
                if (res.code === 200 && res.data) {
                    that.isActionSuccessed = true;
                    that.getList();
                    //Toast('操作成功！')
                } else {
                    Toast('系统出错！')
                }
            })
        },
        getList() {
            var isPersionalLogin = loginType.isPrivatePersionLogin();
            var params = {
                isPersionalLogin,
                keyName: this.keyName,
                propName: this.propName
            };
            var that = this;
            this.$api.keyword.keywordList(params).then(res => {
                if (res.code === 200) {
                    if (that.isActionSuccessed) {
                        Toast('操作成功！')
                        that.isActionSuccessed = false
                    }
                    that.managerList = res.data;
                } else {
                    Toast('系统出错！')
                }
            })
        },
        initData() {
            var params1 = {
                propName: this.propName,
                keyName: this.keyName
            };
            var that = this;
            this.$api.keyword.keywordConfigGetConfig(params1).then(res => {
                if (res.code === 200) {
                    var ary = new Array();
                    if (res.data.item1)
                        ary.push('0');
                    if (res.data.item2)
                        ary.push('1');
                    that.isInitConfig = true;
                    that.identityChk = ary;
                } else {
                    Toast('错误！')
                }
            })
        },
        configChange(bl, isPrivate) {
            var params1 = {
                propName: this.propName,
                keyName: this.keyName,
                isPrivate: isPrivate
            };
            if (bl) {
                this.$api.keyword.keywordConfigDelete(params1).then(res => {
                    if (res.code === 200 && res.data) {
                        Toast('操作成功！')
                    } else {
                        Toast('系统出错！')
                    }
                })
            } else {
                this.$api.keyword.keywordConfigAdd(params1).then(res => {
                    if (res.code === 200 && res.data) {
                        Toast('操作成功！')
                    } else {
                        Toast('系统出错！')
                    }
                })
            }
        },
    },
    mounted() {
        if (this.value) {
            this.visible = true;
        }
    }
}
</script>
<style scoped>
.colortext::v-deep .van-field__label,
.colortext::v-deep .van-radio__label,
.colortext::v-deep .van-checkbox__label,
.colortext::v-deep .van-field__control {
    color: #323233 !important;
}
</style>
